<template>
    <div class="device-list">
        <div class="device-list-container flex-container">

            <!--<el-row class="search-row">-->
                <!--<el-col :span="24">-->
                    <!--<el-form :inline="true" :model="searchForm" class="demo-form-inline">-->
                        <!--<el-form-item label="医院">-->
                            <!--<el-select v-model="searchForm.sp" filterable placeholder="请选择">-->
                                <!--<el-option-->
                                        <!--v-for="item in hospitalList"-->
                                        <!--:key="item.id"-->
                                        <!--:label="item.name"-->
                                        <!--:value="item.id">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                        <!--</el-form-item>-->
                        <!--<el-form-item class="pull-right">-->
                            <!--<el-button type="primary" @click="clearSearchOption">清空</el-button>-->
                            <!--<el-button type="success" @click="_userList()">查询</el-button>-->
                        <!--</el-form-item>-->
                    <!--</el-form>-->
                <!--</el-col>-->
            <!--</el-row>-->

            <div class="device-list-table">

                <el-table :data="userList" border>

                    <el-table-column label="ID" prop="id" width="80"></el-table-column>
                    <el-table-column label="所属医院" prop="sp_name" width="150"></el-table-column>
                    <el-table-column label="姓名" prop="name" width="120"></el-table-column>
                    <el-table-column label="头像">
                        <template slot-scope="scope">
                            <img :src="scope.row.avatar_url" alt="" class="thumb-img">
                        </template>
                    </el-table-column>
                    <el-table-column label="注册时间">
                        <template slot-scope="scope">
                            {{scope.row.create_time | timeFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="240">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary outline"
                                       @click="trackAdd(scope.row)">
                                添加
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="flex-footer h-80">
                <div class="flex-footer-content">
                    <el-row>
                        <el-col :span="8" class="pt-6">
                            &nbsp;
                            <!--<el-button type="success" @click="showEditModal()">添加医生</el-button>-->
                        </el-col>
                        <el-col :span="16" class="text-right" v-if="total > 0">
                            <el-pagination
                                    @current-change="pageChange"
                                    :current-page="currentPage"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <!--编辑弹窗-->
        <el-dialog title="二维码" custom-class="edit-dialog" width="30%"
                   @close="handleQrcodeModalClose"
                   :visible.sync="showQrcodeVisible">
            <div class="text-center">
                <img :src="qrcodeUrl" v-if="qrcodeUrl" alt="" width="300">
            </div>
        </el-dialog>

        <el-dialog title="医生编辑" width="400px" custom-class="edit-dialog" :visible.sync="editModalVisible"
        @close="handleModalClose">
        <el-form :label-position="'left'" label-width="110px" ref="userForm" :model="userForm">
            <el-form-item label="所属医院" >
                <el-select v-model="userForm.sp" filterable placeholder="请选择">
                    <el-option
                            v-for="item in hospitalList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名" >
                <el-input v-model="userForm.name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"
                        :action="Core.Const.NET.UPLOAD_FILE_URL"
                        :show-file-list="false"
                        :on-success="handleAvatarUploadSuccess">
                    <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="success" @click="saveUser('userForm')">确认更新</el-button>
        </div>
    </el-dialog>

    </div>
</template>

<script type="text/ecmascript-6">

    import Core from 'core/core'

    export default {
        data() {
            return {
                Core: Core,
                editModalVisible: false,
                showQrcodeVisible: false,
                searchForm: {
                    sp: "",
                },
                userForm: {
                    id: 0,
                    sp: "",
                    name: "",
                    avatar: ""
                },
                userList: [],
                hospitalList: [],

                // 分页配置
                currentPage: 1,
                total: 0,
                pageSize: 10,

                avatarUrl: "",
                qrcodeUrl: ""
            }
        },
        mounted: function () {
            this._userList();
            // this._hospitalList();
        },

        methods: {
            clearSearchOption() {
                this.searchForm.sp = '';
                this._userList();
            },
            _userList() {
                Core.Api.User.list(2, 0, this.currentPage)
                    .then(res => {
                        this.userList = res.list;
                        this.total = res.count
                    })
                    .catch(err => {})
            },
            _hospitalList() {
                Core.Api.Hospital.list(this.currentPage, 50)
                    .then(res => {
                        this.hospitalList = res.list;

                    })
                    .catch(err => {
                    })
            },

            pageChange(val) {
                this.currentPage = val;
                this._userList();
            },

            saveUser(formName) {
                Core.Api.User.saveUser(
                    this.userForm.id,
                    this.userForm.sp,
                    this.userForm.name,
                    this.userForm.avatar
                ).then(res => {
                    this.editModalVisible = false;
                    this._userList();
                })
            },

            showQrcodeModal(index, row) {
                this.qrcodeUrl = Core.Const.NET.END_POINT_ADMIN + "/user/qrcode?user_id=" + row.id;

                this.showQrcodeVisible = true;
            },

            showWxQrcodeModal(index, row) {
                this.qrcodeUrl = Core.Const.NET.END_POINT_ADMIN + "/user/wx-qrcode?user_id=" + row.id;
                this.showQrcodeVisible = true;
            },

            handleQrcodeModalClose() {
                this.qrcodeUrl = "";
            },

            handleEditModalClose() {
                this.userForm = {
                    id: 0,
                    sp: "",
                    name: "",
                    avatar: ""
                };

                this.avatarUrl = "";
            },

            showEditModal(item) {
                if (item) {
                    this.userForm = {
                        id: item.id,
                        sp: item.sp,
                        name: item.name,
                        avatar: item.avatar
                    };

                    this.avatarUrl = Core.Const.NET.FILE_STATIC_URL + item.avatar;
                }
                this.editModalVisible = true;
            },

            handleAvatarUploadSuccess(res, file) {
                this.userForm.avatar = res.data.filename;
                this.avatarUrl = res.data.file_url;
            },

            deleteUser(index, row) {
                this.$alert('确认删除吗?', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if (action == 'confirm') {
                            Core.Api.User.deleteUser(row.id)
                                .then(res => {
                                    this.$message.success("删除成功");
                                    this._userList();
                                })
                        }
                    }
                });
            },

            handleModalClose() {
                this.userForm = {
                    id: 0,
                    sp: '',
                    name: '',
                    avatar: ''
                };
                this.avatarUrl = '';
            },

            trackAdd(item) {
                this.$confirm('确认将该医生加入经销商吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return Core.Api.Dealer.trackAdd(item.id)
                })
                    .then(res => {
                        this._userList();
                    })
                    .catch(() => {

                });
            }

        }
    }
</script>

<style scoped lang="scss">
    .device-list {
        height: 100%;
        .device-list-container {
            height: 100%;
            .search-row {
                margin: 0;
                padding: 15px 30px;
                background: #fff;
                .el-form--inline .el-form-item {
                    margin-bottom: 0;
                }
                .el-form-item__label {
                    padding-right: 10px;
                    font-size: 12px;
                }
                .el-form-item__content {
                    .el-input {
                        width: 175px;
                    }
                }
            }

            .device-list-table {
                padding: 20px 0;
                background: #ffffff;
                position: relative;
                flex: 1;
                overflow: auto;
                .all-select-holder {
                    line-height: 30px;
                    position: absolute;
                    left: 10px;
                    z-index: 10;
                }
            }
            .flex-footer {
                border-top: 1px solid #E0E7EF;
            }
            .flex-footer.h-80 {
                height: 80px;
            }

        }

        a.success {
            display: inline-block;
            color: #fff;
            background-color: #03CC75;
            border-color: #03CC75;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 7px 16px;
            font-size: 12px;
            border-radius: 4px;
            margin: 0 10px;
        }

        .upload-device {
            display: inline-block;
        }
    }
</style>
